perf(blog): optimize hover performance on paginated blog page #2005
Conversation
|
Hi @Adityakumar37! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: issue reference Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2005 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 30 30
Lines 633 633
Branches 196 196
=========================================
Hits 633 633 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Hi @Adityakumar37! Thanks a lot for your contribution! I noticed that the following required information is missing or incomplete: issue reference Please update the PR description to include this information. You can find placeholders in the PR template for these items. Thanks a lot! |
|
@Utkarsh-123github waiting for your review |
|
Some checks are failed , please work on that. |
2 participants
What kind of change does this PR introduce?
**Issue Number:#1965
Closes #1965
Screenshots/videos:
Before:
After:
Screen.Recording.2025-12-16.at.12.02.28.AM.mov
(No visual UI changes)
If relevant, did you update the documentation?
Summary
Hover animations on the Blog page felt delayed on paginated views (page 2 and beyond).
This was caused by runtime-heavy operations being executed during render, including
reading-time calculations for each blog post.
This PR improves performance by:
Moving reading-time calculation to build time (
getStaticProps)Reading time was previously computed during render for each blog card.
This calculation is now performed once at build time and passed as static
data, eliminating repeated runtime work on the client.
Reducing main-thread work on paginated pages
On page 2 and beyond, multiple blog cards were rendered simultaneously,
causing expensive computations during render and resulting in delayed
hover interactions. By precomputing data, render work is minimized and
hover responsiveness is improved.
Preserving existing hover styles and UI behavior
No CSS, animation, or interaction logic was modified. Hover behavior
remains exactly the same; only the underlying performance has been
optimized.
As a result, reading time is now computed at build time to avoid repeated runtime
calculations during pagination, improving hover responsiveness without
changing UI behavior.
Does this PR introduce a breaking change?
Checklist